// src/components/BottomNav/index.jsx
import React from 'react';
import { Tabbar } from 'react-vant';
import { HomeO, ChartTrendingO, NotesO, UserO } from '@react-vant/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import styles from './index.module.less';


export default function BottomNav() {
  const navigate = useNavigate();
  const location = useLocation();

  // 获取当前路由对应的 Tab name（如 /home -> 'home'）
  const currentTab = location.pathname.split('/')[1] || 'home';

  return (
    <div className={styles.bottomNav}>
      <Tabbar
        fixed
        safeAreaInsetBottom
        value={currentTab} // 高亮当前选中的 Tab
        onChange={(name) => navigate(`/${name}`)}
        style={{ 
          borderTop: '1px solid #000',
          boxShadow: 'none'
        }}
      >
        <Tabbar.Item name="home" icon={<HomeO />}>首页</Tabbar.Item>
        <Tabbar.Item name="data" icon={<ChartTrendingO />}>数据</Tabbar.Item>
        <Tabbar.Item name="plan" icon={<NotesO />}>计划</Tabbar.Item>
        <Tabbar.Item name="mine" icon={<UserO />}>我的</Tabbar.Item>
      </Tabbar>
    </div>
  );
}